﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索结果 - 模切材料小管家</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* TDesign 工业品色彩系统 */
            --primary-color: #0052d9;
            --primary-light: #266fe8;
            --primary-dark: #003cab;
            --secondary-color: #f2f3ff;
            --accent-color: #e37318;
            --success-color: #00a870;
            --warning-color: #ed7b2f;
            --error-color: #d54941;
            
            /* 背景色系 */
            --bg-color-page: #f5f7fa;
            --bg-color-container: #ffffff;
            --bg-color-secondray: #f8f9fc;
            
            /* 边框和分割线 */
            --border-color: #e7e7e7;
            --border-color-light: #f0f0f0;
            --border-radius-small: 3px;
            --border-radius-medium: 6px;
            --border-radius-large: 9px;
            
            /* 文字色彩 */
            --text-primary: #1a1a1a;
            --text-secondary: #4e5969;
            --text-placeholder: #86909c;
            --text-disabled: #c9cdd4;
            
            /* 阴影系统 */
            --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-2: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
            --shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
            
            /* 间距系统 */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: var(--bg-color-page);
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
            padding-bottom: 64px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            background: var(--bg-color-container);
            min-height: 100vh;
            box-shadow: var(--shadow-1);
            position: relative;
            overflow-x: hidden;
        }
        
        /* 头部样式 - TDesign 简约风格 */
        .header {
            background: var(--primary-color);
            color: white;
            padding: var(--space-4) var(--space-4) var(--space-5);
            position: relative;
            z-index: 10;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
        }
        
        .back-btn {
            font-size: 18px;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.2s ease;
        }
        
        .back-btn:hover {
            opacity: 1;
        }
        
        .page-title {
            font-weight: 500;
            font-size: 16px;
        }
        
        .actions {
            display: flex;
            gap: var(--space-5);
        }
        
        .actions i {
            font-size: 16px;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.2s ease;
        }
        
        .actions i:hover {
            opacity: 1;
        }
        
        .search-box {
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: var(--border-radius-medium);
            padding: var(--space-2) var(--space-3);
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
        }
        
        .search-box:focus-within {
            background: rgba(255,255,255,0.25);
            border-color: rgba(255,255,255,0.4);
        }
        
        .search-box i {
            margin-right: var(--space-2);
            color: rgba(255,255,255,0.7);
            font-size: 14px;
        }
        
        .search-box input {
            background: transparent;
            border: none;
            color: white;
            width: 100%;
            font-size: 14px;
            outline: none;
        }
        
        .search-box input::placeholder {
            color: rgba(255,255,255,0.6);
        }
        
        /* 搜索分类 - TDesign 简约风格 */
        .search-categories {
            display: flex;
            gap: var(--space-2);
            margin-top: var(--space-2);
            overflow-x: auto;
            padding-bottom: var(--space-1);
        }
        
        .category-tag {
            padding: var(--space-1) var(--space-3);
            border-radius: var(--border-radius-small);
            font-size: 12px;
            background: rgba(255,255,255,0.2);
            color: white;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
        }
        
        .category-tag:hover {
            background: rgba(255,255,255,0.3);
        }
        
        .category-tag.active {
            background: rgba(255,255,255,0.3);
            font-weight: 500;
        }
        
        /* 筛选栏 - TDesign 简约风格 */
        .filter-bar {
            background: var(--bg-color-container);
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border-color-light);
            display: flex;
            gap: var(--space-2);
            align-items: center;
        }
        
        .filter-item {
            padding: var(--space-1) var(--space-3);
            border-radius: var(--border-radius-small);
            font-size: 12px;
            background: var(--bg-color-secondray);
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
            border: 1px solid var(--border-color-light);
        }
        
        .filter-item:hover {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .filter-item.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .city-filter-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: var(--space-2) var(--space-4);
            border-radius: var(--border-radius-small);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        
        .city-filter-btn:hover {
            background: var(--primary-dark);
        }
        
        .city-filter-btn i {
            font-size: 10px;
        }
        
        .filter-spacer {
            flex: 1;
        }
        
        .category-filter-btn {
            background: var(--accent-color);
            color: white;
            border: none;
            padding: var(--space-2) var(--space-4);
            border-radius: var(--border-radius-small);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        
        .category-filter-btn:hover {
            background: #c5611d;
        }
        
        .category-filter-btn i {
            font-size: 10px;
        }
        
        /* 搜索结果 - TDesign 简约风格 */
        .search-results {
            padding: var(--space-4);
        }
        
        .result-stats {
            color: var(--text-placeholder);
            font-size: 12px;
            margin-bottom: var(--space-4);
        }
        
        .result-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }
        
        .result-item {
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            padding: var(--space-3);
            box-shadow: var(--shadow-1);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
            border: 1px solid var(--border-color-light);
        }
        
        .result-item:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-2);
        }
        
        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--space-2);
        }
        
        .result-title {
            font-weight: 500;
            font-size: 14px;
            color: var(--text-primary);
            flex: 1;
            margin-right: var(--space-2);
        }
        
        .result-type {
            color: white;
            font-size: 10px;
            padding: var(--space-1) var(--space-2);
            border-radius: var(--border-radius-small);
            flex-shrink: 0;
        }
        
        .result-desc {
            color: var(--text-secondary);
            font-size: 12px;
            margin-bottom: var(--space-2);
            line-height: 1.4;
        }
        
        .result-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-placeholder);
            font-size: 11px;
        }
        
        .result-company {
            display: flex;
            align-items: center;
        }
        
        .result-company i {
            margin-right: var(--space-1);
            color: var(--primary-color);
            font-size: 10px;
        }
        
        /* 位置和日期行样式 - 参考加工一览 */
        .location-date-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-2) var(--space-3);
            background: var(--bg-color-secondray);
            border-radius: var(--border-radius-small);
            margin-top: var(--space-2);
            border: 1px solid var(--border-color-light);
        }
        
        .location-info {
            display: flex;
            align-items: center;
            color: var(--text-secondary);
            font-size: 12px;
        }
        
        .location-info i {
            color: var(--text-placeholder);
            margin-right: var(--space-1);
            font-size: 10px;
        }
        
        .date-info {
            color: var(--text-placeholder);
            font-size: 11px;
        }
        
        /* 材料特殊样式 - 对应首页找材料橙色 */
        .material-item {
            background: var(--bg-color-container);
            border-left: 3px solid var(--accent-color);
        }
        
        .material-item .result-type {
            background: var(--accent-color);
        }
        
        /* 加工特殊样式 - 对应首页找加工蓝色 */
        .process-item {
            background: var(--bg-color-container);
            border-left: 3px solid var(--primary-light);
        }
        
        .process-item .result-type {
            background: var(--primary-light);
        }
        
        /* 散料特殊样式 - 对应首页找散料红色 */
        .bulk-material-item {
            background: var(--bg-color-container);
            border-left: 3px solid var(--error-color);
        }
        
        .bulk-material-item .result-type {
            background: var(--error-color);
        }
        
        /* 拼单特殊样式 - 对应首页找拼单绿色 */
        .group-order-item {
            background: var(--bg-color-container);
            border-left: 3px solid var(--success-color);
        }
        
        .group-order-item .result-type {
            background: var(--success-color);
        }
        
        /* 技术参数特殊样式 - 对应首页找参数紫色 */
        .tech-param-item {
            background: var(--bg-color-container);
            border-left: 3px solid #8b5cf6;
        }
        
        .tech-param-item .result-type {
            background: #8b5cf6;
        }
        
        /* 底部导航 - TDesign 简约风格 */
        .tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-color-container);
            display: flex;
            border-top: 1px solid var(--border-color);
            z-index: 100;
            max-width: 480px;
            margin: 0 auto;
            height: 64px;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-2) 0;
            color: var(--text-placeholder);
            font-size: 10px;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .tab-item.active {
            color: var(--primary-color);
        }
        
        .tab-item:hover {
            color: var(--primary-light);
        }
        
        .tab-item i {
            font-size: 18px;
            margin-bottom: var(--space-1);
        }
        
        /* 空状态 - TDesign 简约风格 */
        .empty-state {
            text-align: center;
            padding: var(--space-10) var(--space-5);
            color: var(--text-placeholder);
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: var(--space-4);
            color: var(--border-color);
        }
        
        .empty-state h3 {
            font-size: 14px;
            margin-bottom: var(--space-2);
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .empty-state p {
            font-size: 12px;
            line-height: 1.5;
        }
        
        /* 城市选择弹窗 */
        .city-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            align-items: flex-end;
        }
        
        .city-modal.show {
            display: flex;
        }
        
        .city-modal-content {
            background: var(--bg-color-container);
            width: 100%;
            max-height: 60vh;
            border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
            padding: var(--space-4);
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .city-modal.show .city-modal-content {
            transform: translateY(0);
        }
        
        .city-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-2);
            border-bottom: 1px solid var(--border-color-light);
        }
        
        .city-modal-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .city-modal-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-placeholder);
            cursor: pointer;
        }
        
        .city-levels {
            display: flex;
            gap: var(--space-2);
            margin-bottom: var(--space-4);
        }
        
        .city-level {
            flex: 1;
            padding: var(--space-2);
            border: 1px solid var(--border-color-light);
            border-radius: var(--border-radius-small);
            background: var(--bg-color-secondray);
            text-align: center;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .city-level.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .city-list {
            max-height: 200px;
            overflow-y: auto;
        }
        
        .city-item {
            padding: var(--space-3);
            border-bottom: 1px solid var(--border-color-light);
            cursor: pointer;
            transition: background 0.2s ease;
        }
        
        .city-item:hover {
            background: var(--bg-color-secondray);
        }
        
        .city-item:last-child {
            border-bottom: none;
        }
        
        .city-item.active {
            background: var(--secondary-color);
            color: var(--primary-color);
        }
        
        /* 分类筛选弹窗 */
        .category-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            align-items: flex-end;
        }
        
        .category-modal.show {
            display: flex;
        }
        
        .category-modal-content {
            background: var(--bg-color-container);
            width: 100%;
            max-height: 70vh;
            border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
            padding: var(--space-4);
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .category-modal.show .category-modal-content {
            transform: translateY(0);
        }
        
        .category-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-2);
            border-bottom: 1px solid var(--border-color-light);
        }
        
        .category-modal-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .category-modal-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-placeholder);
            cursor: pointer;
        }
        
        .category-levels {
            display: flex;
            gap: var(--space-2);
            margin-bottom: var(--space-4);
        }
        
        .category-level {
            flex: 1;
            padding: var(--space-2);
            border: 1px solid var(--border-color-light);
            border-radius: var(--border-radius-small);
            background: var(--bg-color-secondray);
            text-align: center;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .category-level.active {
            background: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
        }
        
        .category-list {
            max-height: 250px;
            overflow-y: auto;
        }
        
        .category-item {
            padding: var(--space-3);
            border-bottom: 1px solid var(--border-color-light);
            cursor: pointer;
            transition: background 0.2s ease;
        }
        
        .category-item:hover {
            background: var(--bg-color-secondray);
        }
        
        .category-item:last-child {
            border-bottom: none;
        }
        
        .category-item.active {
            background: var(--secondary-color);
            color: var(--accent-color);
        }
        
        .modal-buttons {
            display: flex;
            gap: var(--space-2);
            margin-top: var(--space-4);
            padding-top: var(--space-4);
            border-top: 1px solid var(--border-color-light);
        }
        
        .modal-btn {
            flex: 1;
            padding: var(--space-3);
            border: none;
            border-radius: var(--border-radius-medium);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .modal-btn-cancel {
            background: var(--bg-color-secondray);
            color: var(--text-secondary);
        }
        
        .modal-btn-cancel:hover {
            background: var(--border-color-light);
        }
        
        .modal-btn-confirm {
            background: var(--accent-color);
            color: white;
        }
        
        .modal-btn-confirm:hover {
            background: #c5611d;
        }
        
        /* 筛选状态样式 */
        .city-filter-btn.filtered {
            background: var(--accent-color);
            border-color: var(--accent-color);
        }
        
        .city-filter-btn.filtered:hover {
            background: #c5611d;
        }
        
        .category-filter-btn.filtered {
            background: var(--primary-color);
        }
        
        .category-filter-btn.filtered:hover {
            background: var(--primary-dark);
        }
        
        .result-item.hidden {
            display: none !important;
        }
        
        .filter-active-indicator {
            background: var(--accent-color);
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 8px;
            margin-left: var(--space-1);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <div class="top-bar">
                <div class="back-btn" onclick="history.back()">
                    <i class="fas fa-arrow-left"></i>
                </div>
                <div class="page-title">搜索结果</div>
                <div class="actions">
                </div>
            </div>
            
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="搜索产品型号、材料名称或技术参数..." value="单面胶带">
            </div>
        </div>
        
        <!-- 筛选栏 -->
        <div class="filter-bar">
            <div class="filter-item active" onclick="filterNational()">全国</div>
            <button class="city-filter-btn" onclick="showCityModal()">
                <i class="fas fa-map-marker-alt"></i>
                城市
            </button>
            <div class="filter-spacer"></div>
            <button class="category-filter-btn" onclick="showCategoryModal()">
                <i class="fas fa-filter"></i>
                分类筛选
            </button>
        </div>
        
        <!-- 搜索结果 -->
        <div class="search-results">
            <div class="result-stats">
                找到 <strong>156</strong> 个相关结果
            </div>
            
            <div class="result-list">
                <!-- 材料结果 - 按型号展示 -->
                <div class="result-item material-item" onclick="location.href='material-detail.html'">
                    <div class="result-header">
                        <div class="result-title">BOPP-001</div>
                        <div class="result-type">材料</div>
                    </div>
                    <div class="result-desc">
                        产品分类：胶带类<br>
                        产品名称：单面胶带（工业级）<br>
                        规格：50mm×50m，厚度0.15mm，耐高温，粘性强
                    </div>
                    <div class="result-meta">
                        <div class="result-company">
                            <i class="fas fa-building"></i>
                            <span>鑫源材料厂</span>
                        </div>
                    </div>
                    <div class="location-date-row">
                        <div class="location-info">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>广东省深圳市</span>
                        </div>
                        <div class="date-info">2024-01-15</div>
                    </div>
                </div>
                
                <!-- 散料结果 - 按型号展示 -->
                <div class="result-item bulk-material-item" onclick="location.href='bulk-material-detail.html'">
                    <div class="result-header">
                        <div class="result-title">BULK-001</div>
                        <div class="result-type">散料</div>
                    </div>
                    <div class="result-desc">
                        产品分类：胶带类<br>
                        产品名称：单面胶带散料<br>
                        规格：库存散料，规格不统一，适合小批量采购
                    </div>
                    <div class="result-meta">
                        <div class="result-company">
                            <i class="fas fa-building"></i>
                            <span>华强材料</span>
                        </div>
                    </div>
                    <div class="location-date-row">
                        <div class="location-info">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>广东省广州市</span>
                </div>
                        <div class="date-info">2024-01-14</div>
                    </div>
                </div>
                
                <!-- 加工服务结果 - 按型号展示 -->
                <div class="result-item process-item" onclick="location.href='process-detail.html'">
                    <div class="result-header">
                        <div class="result-title">PROC-001</div>
                        <div class="result-type">加工</div>
                    </div>
                    <div class="result-desc">
                        产品分类：胶带类<br>
                        产品名称：胶带模切加工服务<br>
                        加工要求：支持各种形状定制，精度±0.1mm，24小时交付
                    </div>
                    <div class="result-meta">
                        <div class="result-company">
                            <i class="fas fa-building"></i>
                            <span>精工模切厂</span>
                        </div>
                    </div>
                    <div class="location-date-row">
                        <div class="location-info">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>江苏省苏州市</span>
                        </div>
                        <div class="date-info">2024-01-13</div>
                    </div>
                </div>
                
                <!-- 更多材料结果 - 按型号展示 -->
                <div class="result-item material-item" onclick="location.href='material-detail.html'">
                    <div class="result-header">
                        <div class="result-title">3M-001</div>
                        <div class="result-type">材料</div>
                    </div>
                    <div class="result-desc">
                        产品分类：胶带类<br>
                        产品名称：双面胶带（3M品质）<br>
                        规格：3M技术，适用于电子产品贴合，粘性强，无残留
                    </div>
                    <div class="result-meta">
                        <div class="result-company">
                            <i class="fas fa-building"></i>
                            <span>3M授权经销商</span>
                        </div>
                    </div>
                    <div class="location-date-row">
                        <div class="location-info">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>上海市</span>
                        </div>
                        <div class="date-info">2024-01-12</div>
                    </div>
                </div>
                
                <div class="result-item material-item" onclick="location.href='material-detail.html'">
                    <div class="result-header">
                        <div class="result-title">OCA-001</div>
                        <div class="result-type">材料</div>
                    </div>
                    <div class="result-desc">
                        产品分类：胶带类<br>
                        产品名称：OCA光学胶带<br>
                        规格：光学级，高透光率92%，适用于触摸屏和显示屏贴合
                    </div>
                    <div class="result-meta">
                        <div class="result-company">
                            <i class="fas fa-building"></i>
                            <span>光科材料</span>
                        </div>
                    </div>
                    <div class="location-date-row">
                        <div class="location-info">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>浙江省杭州市</span>
                        </div>
                        <div class="date-info">2024-01-11</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="tabbar">
            <div class="tab-item active">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-search"></i>
                <span>求购</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-plus-circle"></i>
                <span>发布</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-comments"></i>
                <span>客服</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
        
        <!-- 城市选择弹窗 -->
        <div class="city-modal" id="cityModal">
            <div class="city-modal-content">
                <div class="city-modal-header">
                    <div class="city-modal-title">选择城市</div>
                    <button class="city-modal-close" onclick="hideCityModal()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="city-levels">
                    <div class="city-level active" data-level="province" onclick="switchCityLevel('province')">省份</div>
                    <div class="city-level" data-level="city" onclick="switchCityLevel('city')">城市</div>
                    <div class="city-level" data-level="district" onclick="switchCityLevel('district')">区县</div>
                </div>
                
                <div class="city-list" id="cityList">
                    <!-- 动态生成城市列表 -->
                </div>
            </div>
        </div>
        
        <!-- 分类筛选弹窗 -->
        <div class="category-modal" id="categoryModal">
            <div class="category-modal-content">
                <div class="category-modal-header">
                    <div class="category-modal-title">类别筛选</div>
                    <button class="category-modal-close" onclick="hideCategoryModal()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="category-levels">
                    <div class="category-level active" data-level="main" onclick="switchCategoryLevel('main')">一级分类</div>
                    <div class="category-level" data-level="sub" onclick="switchCategoryLevel('sub')">二级分类</div>
                    <div class="category-level" data-level="product" onclick="switchCategoryLevel('product')">三级分类</div>
                </div>
                
                <div class="category-list" id="categoryList">
                    <!-- 动态生成分类列表 -->
                </div>
                
                <div class="modal-buttons">
                    <button class="modal-btn modal-btn-cancel" onclick="hideCategoryModal()">取消</button>
                    <button class="modal-btn modal-btn-confirm" onclick="applyCategoryFilter()">确定</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 城市数据
        const cityData = {
            '广东省': {
                '深圳市': ['南山区', '福田区', '罗湖区', '宝安区', '龙岗区', '盐田区', '龙华区', '坪山区', '光明区', '大鹏新区'],
                '广州市': ['天河区', '越秀区', '荔湾区', '海珠区', '白云区', '黄埔区', '番禺区', '花都区', '南沙区', '从化区', '增城区'],
                '东莞市': ['莞城街道', '南城街道', '东城街道', '万江街道', '石碣镇', '石龙镇', '茶山镇', '石排镇', '企石镇', '横沥镇'],
                '佛山市': ['禅城区', '南海区', '顺德区', '三水区', '高明区']
            },
            '江苏省': {
                '苏州市': ['姑苏区', '虎丘区', '吴中区', '相城区', '吴江区', '常熟市', '张家港市', '昆山市', '太仓市'],
                '南京市': ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区', '栖霞区', '雨花台区', '江宁区', '六合区', '溧水区', '高淳区'],
                '无锡市': ['梁溪区', '锡山区', '惠山区', '滨湖区', '新吴区', '江阴市', '宜兴市']
            },
            '浙江省': {
                '杭州市': ['上城区', '拱墅区', '西湖区', '滨江区', '萧山区', '余杭区', '临平区', '钱塘区', '富阳区', '临安区', '桐庐县', '淳安县', '建德市'],
                '宁波市': ['海曙区', '江北区', '北仑区', '镇海区', '鄞州区', '奉化区', '象山县', '宁海县', '余姚市', '慈溪市']
            },
            '北京市': {
                '北京市': ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云区', '延庆区']
            },
            '上海市': {
                '上海市': ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '奉贤区', '崇明区']
            }
        };
        
        // 分类数据
        const categoryData = {
            '材料': {
                '胶带类': ['单面胶带', '双面胶带', '美纹纸胶带', '布基胶带', '泡棉胶带'],
                '薄膜类': ['PE薄膜', 'PET薄膜', 'OPP薄膜', 'PVC薄膜', '保护膜'],
                '泡棉类': ['EVA泡棉', 'PE泡棉', 'PU泡棉', '导电泡棉', '防震泡棉'],
                '离型材料': ['离型膜', '离型纸', '硅油纸', '格拉辛纸']
            },
            '加工': {
                '模切加工': ['全模切加工', '手机辅料', '包装印刷', '家居穿戴', '能源动力', '医疗卫生', '背光模切'],
                '冲压加工': ['五金冲压', '精密冲压', '连续冲压', '单冲加工'],
                '激光加工': ['激光切割', '激光打标', '激光焊接', '激光雕刻'],
                'CNC加工': ['精密加工', '数控加工', '车削加工', '铣削加工']
            },
            '散料': {
                '胶带散料': ['单面胶带散料', '双面胶带散料', '美纹纸散料', '布基胶带散料'],
                '薄膜散料': ['PE薄膜散料', 'PET薄膜散料', 'OPP薄膜散料', '保护膜散料'],
                '泡棉散料': ['EVA泡棉散料', 'PE泡棉散料', 'PU泡棉散料', '导电泡棉散料'],
                '离型散料': ['离型膜散料', '离型纸散料', '硅油纸散料']
            }
        };
        
        let currentCityLevel = 'province';
        let selectedProvince = '';
        let selectedCity = '';
        let selectedDistrict = '';
        
        let currentCategoryLevel = 'main';
        let selectedMainCategory = '';
        let selectedSubCategory = '';
        let selectedProduct = '';
        
        // 全国筛选功能
        function filterNational() {
            // 重置城市筛选
            selectedProvince = '';
            selectedCity = '';
            selectedDistrict = '';
            
            // 重置城市按钮文本和样式
            const cityBtn = document.querySelector('.city-filter-btn');
            cityBtn.innerHTML = '<i class="fas fa-map-marker-alt"></i> 城市';
            cityBtn.classList.remove('filtered');
            
            // 显示所有产品
            showAllProducts();
            
            console.log('筛选全国数据');
        }
        
        // 显示所有产品
        function showAllProducts() {
            const productItems = document.querySelectorAll('.result-item');
            productItems.forEach(item => {
                    item.style.display = 'block';
                });
                
            updateResultCount();
        }
        
        // 根据城市筛选产品
        function filterProductsByCity(cityText) {
            const productItems = document.querySelectorAll('.result-item');
            let visibleCount = 0;
            
            productItems.forEach(item => {
                const locationInfo = item.querySelector('.location-info span');
                let locationText = '';
                
                if (locationInfo) {
                    locationText = locationInfo.textContent;
                }
                
                if (locationText.includes(cityText) || 
                    (selectedProvince && locationText.includes(selectedProvince)) ||
                    (selectedCity && locationText.includes(selectedCity))) {
                    item.style.display = 'block';
                    visibleCount++;
                } else {
                        item.style.display = 'none';
                }
            });
            
            updateResultCount(visibleCount);
            console.log(`按城市筛选: ${cityText}, 显示 ${visibleCount} 个产品`);
        }
        
        // 根据分类筛选产品
        function filterProductsByCategory() {
            const productItems = document.querySelectorAll('.result-item');
            let visibleCount = 0;
            
            productItems.forEach(item => {
                let shouldShow = true;
                
                // 根据选中的分类进行筛选
                if (selectedMainCategory) {
                    const itemType = item.querySelector('.result-type').textContent;
                    if (selectedMainCategory === '材料' && !item.classList.contains('material-item')) {
                        shouldShow = false;
                    } else if (selectedMainCategory === '加工' && !item.classList.contains('process-item')) {
                        shouldShow = false;
                    } else if (selectedMainCategory === '散料' && !item.classList.contains('bulk-material-item')) {
                        shouldShow = false;
                    }
                }
                
                if (shouldShow) {
                    item.style.display = 'block';
                    visibleCount++;
                } else {
                        item.style.display = 'none';
                }
            });
            
            updateResultCount(visibleCount);
            console.log(`按分类筛选: ${selectedMainCategory}, 显示 ${visibleCount} 个产品`);
        }
        
        // 更新结果数量显示
        function updateResultCount(count) {
            const resultStats = document.querySelector('.result-stats');
            const totalProducts = document.querySelectorAll('.result-item').length;
            const displayCount = count !== undefined ? count : totalProducts;
            
            resultStats.innerHTML = `找到 <strong>${displayCount}</strong> 个相关结果`;
        }
        
        // 城市筛选相关函数
        function showCityModal() {
            document.getElementById('cityModal').classList.add('show');
            loadCityList();
        }
        
        function hideCityModal() {
            document.getElementById('cityModal').classList.remove('show');
        }
        
        function switchCityLevel(level) {
            currentCityLevel = level;
            
            // 更新级别按钮状态
            document.querySelectorAll('.city-level').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-level="${level}"]`).classList.add('active');
            
            loadCityList();
        }
        
        function loadCityList() {
            const cityList = document.getElementById('cityList');
            cityList.innerHTML = '';
            
            if (currentCityLevel === 'province') {
                Object.keys(cityData).forEach(province => {
                    const item = document.createElement('div');
                    item.className = 'city-item';
                    item.textContent = province;
                    item.onclick = () => selectProvince(province);
                    cityList.appendChild(item);
                });
            } else if (currentCityLevel === 'city' && selectedProvince) {
                Object.keys(cityData[selectedProvince]).forEach(city => {
                    const item = document.createElement('div');
                    item.className = 'city-item';
                    item.textContent = city;
                    item.onclick = () => selectCity(city);
                    cityList.appendChild(item);
                });
            } else if (currentCityLevel === 'district' && selectedProvince && selectedCity) {
                cityData[selectedProvince][selectedCity].forEach(district => {
                    const item = document.createElement('div');
                    item.className = 'city-item';
                    item.textContent = district;
                    item.onclick = () => selectDistrict(district);
                    cityList.appendChild(item);
                });
            }
        }
        
        function selectProvince(province) {
            selectedProvince = province;
            selectedCity = '';
            selectedDistrict = '';
            switchCityLevel('city');
        }
        
        function selectCity(city) {
            selectedCity = city;
            selectedDistrict = '';
            switchCityLevel('district');
        }
        
        function selectDistrict(district) {
            selectedDistrict = district;
            applyCityFilter();
            hideCityModal();
        }
        
        function applyCityFilter() {
            const cityText = selectedDistrict ? 
                `${selectedProvince}${selectedCity}${selectedDistrict}` : 
                selectedCity ? 
                `${selectedProvince}${selectedCity}` : 
                selectedProvince;
            
            // 更新城市按钮文本和样式
            const cityBtn = document.querySelector('.city-filter-btn');
            cityBtn.innerHTML = `<i class="fas fa-map-marker-alt"></i> ${cityText}`;
            cityBtn.classList.add('filtered');
            
            // 更新全国按钮状态 - 取消激活
            document.querySelectorAll('.filter-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // 执行城市筛选
            filterProductsByCity(cityText);
            
            console.log('按城市筛选:', cityText);
        }
        
        // 分类筛选相关函数
        function showCategoryModal() {
            document.getElementById('categoryModal').classList.add('show');
            loadCategoryList();
        }
        
        function hideCategoryModal() {
            document.getElementById('categoryModal').classList.remove('show');
        }
        
        function switchCategoryLevel(level) {
            currentCategoryLevel = level;
            
            // 更新级别按钮状态
            document.querySelectorAll('.category-level').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-level="${level}"]`).classList.add('active');
            
            loadCategoryList();
        }
        
        function loadCategoryList() {
            const categoryList = document.getElementById('categoryList');
            categoryList.innerHTML = '';
            
            if (currentCategoryLevel === 'main') {
                Object.keys(categoryData).forEach(category => {
                    const item = document.createElement('div');
                    item.className = 'category-item';
                    item.textContent = category;
                    item.onclick = () => selectMainCategory(category);
                    categoryList.appendChild(item);
                });
            } else if (currentCategoryLevel === 'sub' && selectedMainCategory) {
                Object.keys(categoryData[selectedMainCategory]).forEach(subCategory => {
                    const item = document.createElement('div');
                    item.className = 'category-item';
                    item.textContent = subCategory;
                    item.onclick = () => selectSubCategory(subCategory);
                    categoryList.appendChild(item);
                });
            } else if (currentCategoryLevel === 'product' && selectedMainCategory && selectedSubCategory) {
                categoryData[selectedMainCategory][selectedSubCategory].forEach(product => {
                    const item = document.createElement('div');
                    item.className = 'category-item';
                    item.textContent = product;
                    item.onclick = () => selectProduct(product);
                    categoryList.appendChild(item);
                });
            }
        }
        
        function selectMainCategory(category) {
            selectedMainCategory = category;
            selectedSubCategory = '';
            selectedProduct = '';
            switchCategoryLevel('sub');
        }
        
        function selectSubCategory(subCategory) {
            selectedSubCategory = subCategory;
            selectedProduct = '';
            switchCategoryLevel('product');
        }
        
        function selectProduct(product) {
            selectedProduct = product;
        }
        
        function applyCategoryFilter() {
            // 更新分类按钮文本和样式
            const categoryBtn = document.querySelector('.category-filter-btn');
            let filterText = selectedMainCategory;
            if (selectedSubCategory) {
                filterText += selectedSubCategory;
            }
            if (selectedProduct) {
                filterText += selectedProduct;
            }
            
            categoryBtn.innerHTML = `<i class="fas fa-filter"></i> ${filterText}`;
            categoryBtn.classList.add('filtered');
            
            // 执行分类筛选
            filterProductsByCategory();
            
            hideCategoryModal();
            console.log('按分类筛选:', selectedMainCategory, selectedSubCategory, selectedProduct);
        }
        
        // 底部导航切换
        document.querySelectorAll('.tab-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 搜索结果点击效果
        document.querySelectorAll('.result-item').forEach(item => {
            item.addEventListener('click', function() {
                this.style.transform = 'scale(0.98)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 150);
            });
        });
        
        // 点击弹窗外部关闭
        document.getElementById('cityModal').addEventListener('click', function(e) {
            if (e.target === this) {
                hideCityModal();
            }
        });
        
        document.getElementById('categoryModal').addEventListener('click', function(e) {
            if (e.target === this) {
                hideCategoryModal();
            }
        });
    </script>
</body>
</html>


